<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0.maximum-scale=1.0,user-scalable=no" name="viewport">
    <script src="js/vue/vue.js"></script>
    <link rel="stylesheet" href="shopping/css/reset.css">
    <link rel="stylesheet" href="shopping/css/index.css">
    <link rel="stylesheet" href="shopping/css/flexible.css">
    <script src="shopping/js/flexible.js"></script>
    <script src="js/vue/axios.js"></script>
	<script src="js/vue/MD5.js"></script>
    <script src="js/vue/vant.js"></script>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/wxJs.js"></script>
</head>
<body>
<div id="app">
    <div id="bg" v-show="isHide" v-cloak>
        {{msgM}}
    </div>
    <header class="clearfix" id=header>
        <div>
            <ul>
                <li class="main lf">
                    <a href="index.html"><img class="page" src="shopping/images/page.png"></a>
                </li>
                <li class="lf width73"> 
                    <div class="search bar3">
                        <input v-model="skey"  @keypress="searchGoods"  type="search" placeholder="请输入商品名称/关键字">
                        <button type="search"><img src="shopping/images/search.png"></button>
                    </div>
                </li>
                <li class="shopping lf" style="margin-left:0.2rem;">
                    <a href="shopJs.html" class="shake-little">
                        <img class="fly" src="shopping/images/shopping.png">
                    </a>
                </li>
            </ul>
        </form>
    </header>
    <section class="main_content">
        <template>
                <div class="clearfix">
                        <div class="left_content clearfix">
                            <ul>
                                <li v-for="(item,index) in goods_type" @click="indexClick(index,item.id)" id="tar_title" class="hover " :class="{actives:currIndex==index}">
                                    <a href="#" v-cloak>{{item.Typename}}</a>
                                </li>
                            </ul>
                        </div>
                        <div class="right_content clearfix">
                            <div v-if="goods_list.length>0" class="list">
                                <ul>
                                    <li class="lf" v-for="item in goods_list" >
                                        <p class="list_title"><span v-cloak>{{item.Typename}}</span></p>
                                        <ul>
                                            <li v-for="items in item.list">
                                                <p class="shopping_img" @click="details(items.id)">
                                                    <img :src="items.Picurl">
                                                </p>
                                                <p class="describe" v-cloak>{{items.GoodsName}}</p>
                                                <p class="price_list">
                                                    <span class="fl" v-cloak>￥{{items.Price}}</span>
                                                    <span class="fr shopping_car_img">
                                                        <img src="shopping/images/shopping_car.png">
                                                        <input class="idsDate" style="display: none" :dat-value='items.id' value="items.id">
                                                    </span>
                                                </p>
                                            </li>
                                        </ul>
										<p v-if="item.list.length=='0'" style="text-align:center;color:#999999;font-size:12px;margin:20px 0px;">该分类下暂无商品</p>
                                    </li>
                                </ul>
                            </div>
                            <div class="notDate" v-else style="text-align: center;margin-top:60px;">
                                <img src="images/shopNot.png"/>
                            </div>
                        </div>
                    </div>
        </template>
    </section>
</div>
</body>
<script src="shopping/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src='shopping/js/jquery-ui.min.js'></script>
<script>
var vm = new Vue({
    el: '#app',
    data: {
        vids:'',
        mPicurl:"images/tx.png",
        gtype:'',
        goods_list:[],
        goods_type:[
            {
                id:'',
                Typename:"全部商品"
            }
        ],
        currIndex:'0',
        skey:'',
        isHide:false,
        msgM:"添加成功"
    },
    created(){
        this.getlists()
    },
    methods:{
        getlists(){
            this.vids=sessionStorage.getItem('Vid')
            //console.log(this.vids)
            const params={
                gtype:this.gtype
            }
            getVs()
            axios.get('/mobileapi/member/goods.php?act=index',{params:params}).then(data =>{
                console.log(data.data)
                let { msg, code,user} = data.data
                    if (code !== 200) {
                        _this.$message({
                            message: msg,
                            type: 'error'
                        });
                    } else {
                        //window.vant.Toast.clear();
                        data=data.data.data
                        for(let i in data.goods_type){
                            this.goods_type.push(data.goods_type[i])
                        }
                        this.goods_list=data.goods_list
                    }
                }).catch(function (error) {
                console.log(error); 
            })
        },
        getSelectList(){
            //console.log(this.vids)
            const params={
                gtype:this.gtype
            }
            getVs()
            axios.get('/mobileapi/member/goods.php?act=index',{params:params}).then(data =>{
                console.log(data.data)
                let { msg, code,user} = data.data
                    if (code !== 200) {
                        _this.$message({
                            message: msg,
                            type: 'error'
                        });
                    } else {
                        //window.vant.Toast.clear();
                        data=data.data.data
                        this.goods_list=data.goods_list
                    }
                }).catch(function (error) {
                console.log(error); 
            })
        },
       
		//提交编辑信息
		save(){
			this.from.Birth=this.$refs.Birth.value
			let from=JSON.stringify(this.from)
			let sign=md5(from)
			const params={
				from:from,
				sign:sign,
				picdate:this.picdate
			}
			axios.post('/mobileapi/member/user_other.php?act=edit_userinfo',Qs.stringify(params)).then(data =>{
                console.log(data.data)
                let { msg, code,user} = data.data
                    if (code !== 200) {
						window.vant.Toast('修改失败');
                    } else {
                        //window.vant.Toast.clear();
                        data=data.data
                       window.vant.Toast('修改成功');
                    }
                }).catch(function (error) {
                    console.log(error); 
            })
		},
        indexClick(index,id){
            this.currIndex=index
            this.gtype=id
            this.getSelectList()
        },
        searchGoods(event) { 
            if (event.keyCode == 13) { //如果按的是enter键 13是enter 
                event.preventDefault(); //禁止默认事件（默认是换行） 
                this.searchList()
            } 
        },
        //搜索
        searchList(){
            //console.log(this.vids)
            const params={
                skey:this.skey
            }
            getVs()
            axios.get('/mobileapi/member/goods.php?act=goods_selct',{params:params}).then(data =>{
                console.log(data.data)
                let { msg, code,user} = data.data
                    if (code !== 200) {
                        _this.$message({
                            message: msg,
                            type: 'error'
                        });
                    } else {
                        //window.vant.Toast.clear();
                        data=data.data.data
                        this.goods_list=data
                    }
                }).catch(function (error) {
                console.log(error); 
            })
        },
        //跳转到详情
        details(id){
            window.location.href='goodsDetails.html?gid='+id+''
        },
        //添加到购物车
        addShoppingCart(id){
             const params={
                gid:id
            }
            getVs()
            axios.get('/mobileapi/member/goods.php?act=add_goodscard',{params:params}).then(data =>{
                console.log(data.data)
                let { msg, code} = data.data
                    if (code !== 200) {
                        this.isHide=true
                        this.msgM=msg
                        this.timers=setTimeout(this.hide, 2000)
                    } else {
                        this.isHide=true
                        this.msgM="添加购物车成功"
                        this.timer=setTimeout(this.hide, 2000)
                    }
                }).catch(function (error) {
                console.log(error); 
            })
        },
        hide(){
            this.isHide=false
        }
    },
    beforeDestroy() {
      clearTimeout(this.timer)
      clearTimeout(this.timers)
    }
})
</script>
<script src="shopping/js/index.js"></script>
</html>